import { Col, Row, Spin } from 'antd';
import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const LayoutPage = lazy(() => import('@/pages/layout/index'));
const HomePage = lazy(() => import('@/pages/home/index'));
const AboutPage = lazy(() => import('@/pages/about/index'));

function Loading() {
    return (
        <Row align={'middle'} justify={'center'} style={{ height: '60vh' }}>
            <Col>
                <Spin></Spin>
            </Col>
        </Row>
    );
}

function BasicRoute() {
    return (
        <BrowserRouter>
            <Suspense fallback={<Loading />}>
                <Routes>
                    <Route path="*" element={<LayoutPage />}>
                        <Route index element={<HomePage />} />
                        <Route path="home" element={<HomePage />} />
                        <Route path="about" element={<AboutPage />} />
                    </Route>
                </Routes>
            </Suspense>
        </BrowserRouter>
    );
}

export default React.memo(BasicRoute);
